<script setup lang="ts">
import {  addPloeAPI, delPoleAPI, editPoleAPI, getPoleListAPI } from '@/apis/pole';
import {    type AddPoleParams, type PoleListItem, type PoleListParams } from '@/types/pole';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const PoleParams = ref<PoleListParams>({
  page: 1,
  pageSize: 5,
  poleName: '',
  poleNumber: '',
  poleStatus: '',
})

const PloeList = ref<PoleListItem[]>([])
const Total = ref(0)
const AreaList = ref<{ id: number, name: string }[]>([])

const GetPoleList = async () => {
  const res = await getPoleListAPI(PoleParams.value)
  // console.log(res.data.rows.map(item => item.areaName));
  PloeList.value = res.data.rows
  Total.value = res.data.total
  // 安装区域
  AreaList.value = res.data.rows.map(item => ({
    id: item.areaId,
    name: item.areaName
  }))
}
GetPoleList()

// 打开模态框
const editDialogVisible = ref(false)

// 编辑
const handleAdd = () => { 
  // 打开模态框
  editDialogVisible.value = true
}

// 添加一体杆数据
const Params = ref<AddPoleParams>({
  areaId: undefined,
  poleIp: '',
  poleName: '',
  poleNumber: '',
  poleType:''
})

const ParamsRules = ref<FormRules<AddPoleParams>>({
  poleName: [{ required: true, message: '请输入一体杆名称', trigger: 'blur' }],
  poleNumber: [{ required: true, message: '请输入一体杆编号', trigger: 'blur' }],
  poleIp: [{ required: true, message: '请输入一体杆IP', trigger: 'blur' }],
  areaId: [{ required: true, message: '请选择关联区域', trigger: 'blur' }],
  poleType: [{ required: true, message: '请选择一体杆类型', trigger: 'blur' }],
})

const ParamsRef = ref<FormInstance>()
// 提交
const handleSubmit = async () => {
  // 总体校验
  ParamsRef.value?.validate()
  // 添加一体杆
  await addPloeAPI(Params.value)
  // 轻提示
  ElMessage.success('添加成功')
  // 关闭模态框
  editDialogVisible.value = false
  // 刷新列表
  GetPoleList()
}

// 查询
const handleSearch = () => {
  PoleParams.value.page = 1; // Reset to first page
  GetPoleList();
};

// 删除一体杆
const delPole = (ids: number[]) => {
  if (ids.length === 0) {
    return ElMessage.warning('请选择要删除的一体杆')
  }
  ElMessageBox.confirm('此操作将永久删除该一体杆, 是否继续?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await delPoleAPI(ids)
    // 轻提示
    ElMessage.success('删除成功')
    // 刷新列表
    GetPoleList()
  })
}

// 选中的一体杆-批量删除
const selectionPoleList = ref<PoleListItem[]>([])
const onSelectChange = (value: PoleListItem[]) => {
  selectionPoleList.value = value
}


// 编辑
const handleEdit = async (row: PoleListItem,id:number) => {
    // 打开模态框
  editDialogVisible.value = true
  // 回显数据
  Params.value = {
    areaId: row.areaId,
    poleIp: row.poleIp,
    poleName: row.poleName,
    poleNumber: row.poleNumber,
    poleType: row.poleType
  }
    // // 编辑提交数据
    await editPoleAPI(Params.value,id)
    // // 轻提示
    ElMessage.success('编辑成功')
}
</script>

<template>
  <div class="rod-manage-page">
      <el-form :inline="true" class="demo-form-inline" :model="PoleParams">
      <el-form-item label="一体杆名称:">
        <el-input v-model="PoleParams.poleName" placeholder="请输入一体杆名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="一体杆编号:">
        <el-input v-model="PoleParams.poleNumber" placeholder="请输入一体杆编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="运行状态:">
        <el-select v-model="PoleParams.poleStatus" placeholder="请选择运行状态" clearable>
          <el-option label="正常" value="normal"></el-option>
          <el-option label="异常" value="abnormal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="add-button" @click="handleAdd">添加一体杆</el-button>
    <el-button class="delete-button" @click="delPole(selectionPoleList.map(item => item.id))">批量删除</el-button>
    <el-table :data="PloeList" class="custom-table" @selection-change="onSelectChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="poleName" label="一体杆名称"></el-table-column>
      <el-table-column prop="poleNumber" label="一体杆编号"></el-table-column>
      <el-table-column prop="poleIp" label="一体杆IP"></el-table-column>
      <el-table-column prop="areaName" label="安装区域"></el-table-column>
      <el-table-column prop="poleType" label="一体杆类型"></el-table-column>
      <el-table-column label="运行状态" prop="poleStatus"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
          <el-button type="text" style="color: red;" @click="delPole([row.id] as any)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="elPagination">
      <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="Total"
      v-model:current-page="PoleParams.page"
      v-model:page-size="PoleParams.pageSize"
      @change="GetPoleList"
    />
    </div>
    <el-dialog v-model="editDialogVisible" width="600px">
      <el-form label-position="top" style="padding-left: 45px; padding-right: 45px;" :model="Params" ref="ParamsRef" :rules="ParamsRules"> 
        <el-form-item label="一体杆名称:" style="width: 420px;" prop="poleName">
          <el-input placeholder="请输入一体杆名称" clearable v-model="Params.poleName"></el-input>
        </el-form-item>
        <el-form-item label="一体杆编号:" style="width: 420px;" prop="poleNumber">
          <el-input placeholder="请输入一体杆编号" clearable v-model="Params.poleNumber"></el-input>
        </el-form-item>
        <el-form-item label="一体杆IP:" style="width: 420px;" prop="poleIp">
          <el-input placeholder="请输入一体杆IP" clearable v-model="Params.poleIp"></el-input>
        </el-form-item>
        <el-form-item label="关联区域:"  prop="areaId">
          <el-select v-model="Params.areaId" style="width: 420px;">
            <el-option v-for="item in AreaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一体杆类型:"  prop="poleType">
          <el-select v-model="Params.poleType" placeholder="请选择一体杆类型" clearable style="width: 420px;">
            <el-option label="入口" value="entrance"></el-option>
            <el-option label="出口" value="export"></el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex; justify-content: end;">
          <el-form-item>
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-form-item>
        </div>
        {{ Params }}
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>
.demo-form-inline {
  margin-top: 20px;
  margin-left: 20px;
}

.add-button {
  margin-left: 20px;
}

.delete-button {
  margin-right: 10px;
}
.custom-table {
  width: 98%;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
}
.elPagination{
  display: flex;
  justify-content: end;
  margin-top: 20px;
  margin-right: 20px;
}
.el-select{
  width: 200px;
}
</style>
